import { useEffect, useState } from 'react'
import Taro, { FC, useReachBottom } from "@tarojs/taro"
import { View, Text, Image } from "@tarojs/components"
import { AtTabs, AtTabsPane } from 'taro-ui'
import "taro-ui/dist/style/components/tabs.scss";
import { useFollowsFacade } from '@/hooks/useFollowsFacade';
import { AnchorsItem, OrgsItem } from '@/models/request/userReq';
import { useOrgFollowsFacade } from '@/hooks/useOrgFollowsFacade';
import { useAuthFacade } from '@/hooks/useAuthFacade';
import './index.scss'

//用户关注
export const MyAttention: FC = () => {
  const [authFacade] = useAuthFacade();
  const [roomsFacade, pagination] = useFollowsFacade(); //查找我关注的主播  
  const [RoomsOrgFacade, pagination1] = useOrgFollowsFacade(); //查找我关注的机构  
  const [cur, setcur] = useState(0) //默认页面初始值
  const [isAttention, setIsAttention] = useState(true)  //是否关注了 
  const [anchorData, setAnchorData] = useState([] as AnchorsItem[]) //关注的主播数据
  const [orgData, setOrgData] = useState([] as OrgsItem[]) //关注的机构数据
  const tabList = [{ title: '主播' }, { title: '机构' }]
  //切换页面事件
  const handleClick = (value) => {
    setcur(value)
  }

  //关注主播数据添加新的字段 
  const anchorEvent = () => {
    if (pagination.data && pagination.data.length > 0) {
      const _arr = [] as AnchorsItem[]
      pagination.data.map((item) => {
        const res = Object.assign({}, item, { followStatus: true })
        _arr.push(res)
      })
      setAnchorData(_arr)
    }
  }

  //关注机构数据添加新的字段 
  const orgEvent = () => {
    if (pagination1.data && pagination1.data.length > 0) {
      const _arr = [] as OrgsItem[]
      pagination1.data.map((item) => {
        const res = Object.assign({}, item, { orgFollowStatus: true })
        _arr.push(res)
      })
      setOrgData(_arr)
    }
  }

  useEffect(() => {
    anchorEvent()
    orgEvent()
  }, [pagination, pagination1]);

  // 关注主播
  const isClickFollowAnchor = (value, index) => {
    const arry = pagination.data[index]
    const toUser = arry.to_user_id
    authFacade.addFollow(toUser, null as any, !isAttention)
    anchorData.map((item) => {
      if (item.to_user_id == value) {
        item.followStatus = !isAttention
      }
    })
    setIsAttention(!isAttention)
  }

  //关注机构
  const isClickFollowOrg = (value, index) => {
    const arry = pagination1.data[index]
    const toOrg = arry.to_org_id
    authFacade.addFollow(null as any, toOrg, !isAttention)
    orgData.map((item) => {
      if (item.to_org_id == value) {
        item.orgFollowStatus = !isAttention
      }
    })
    setIsAttention(!isAttention)
  }

  //监听系统通知
  useEffect(() => {
    //页面销毁时也销毁所有订阅，防止内存泄漏
    return () => {
      roomsFacade.destroy();
    };
  }, []);

  useReachBottom(() => {
    //上拉获取翻页记录
    roomsFacade.nextPage();
  })

  //监听系统通知
  useEffect(() => {
    //页面销毁时也销毁所有订阅，防止内存泄漏
    return () => {
      RoomsOrgFacade.destroy();
    };
  }, []);

  useReachBottom(() => {
    //上拉获取翻页记录
    RoomsOrgFacade.nextPage();
  })

  return (
    <View className='index'>
      <View className='main'>
        <AtTabs current={cur} tabList={tabList} onClick={handleClick.bind(this)}>
          <AtTabsPane current={cur} index={0} >
            {
              anchorData && anchorData.length > 0 && anchorData.map((item, index) => (
                <View className='content' key={index}>
                  <View className='left'>
                    <Image className='tx_img' src={item.avatar}  ></Image>
                  </View>
                  <View className='right'>
                    <View className='right-ct'>
                      <View className='useName'>{item.real_name}</View>
                      <View className='describe'>{item.desc}</View>
                    </View>
                    <View className={item.followStatus ? 'attention1' : 'attention'} onClick={() => isClickFollowAnchor(item.to_user_id, index)}>{item.followStatus ? '已关注' : '关注'}</View>
                  </View>
                </View>
              ))
            }
            {!pagination.data || pagination.data.length === 0 && (
              <View className='background'>
                <View className='img'><Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/historyBJ.png' className='bj-img'></Image></View>
                <View className='text'>
                  <Text>暂无关注的主播</Text>
                </View>
              </View>
            )}
          </AtTabsPane>
          <AtTabsPane current={cur} index={1} >
            {
              orgData && orgData.length > 0 && orgData.map((item, index) => (
                <View className='content1' key={index}>
                  <View className='left'>
                    <Image className='tx_img' src={item.org_logo}  ></Image>
                  </View>
                  <View className='right'>
                    <View className='right-ct'>
                      <View className='useName'>{item.org_name}</View>
                      <View className='describe'> {item.org_desc}</View>
                    </View>
                    <View className={item.orgFollowStatus ? 'attention1' : 'attention'} onClick={() => isClickFollowOrg(item.to_org_id, index)}>{item.orgFollowStatus ? '已关注' : '关注'}</View>
                  </View>
                </View>
              ))
            }

            {!pagination1.data || pagination1.data.length === 0 && (
              <View className='background'>
                <View className='img'><Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/historyBJ.png' className='bj-img'></Image></View>
                <View className='text'>
                  <Text>暂无关注的机构</Text>
                </View>
              </View>
            )}
          </AtTabsPane>
        </AtTabs>
      </View>
    </View>
  )
}
export default MyAttention